<template>
	<view class="page">
		<view class="content_top">
			<view class="back" @click="toback"> <uni-icons type="back" size="30" color="#fff"></uni-icons> </view>
			<image class="logo" :src="`${store.state.baseImgUrl}static/indexpage/ryzn.png`"></image>
		</view>
		<view class="content2">
				<image :src="`${store.state.baseImgUrl}static/main/top_docimg.png`" class="border_top"></image>
				<view class="top_text">
					<text class="texts">国家法定假日免费</text>
					<text class="texts">开放时间:8:00 - 17:30</text>
				</view>
			</view>
		<view class="content3">
			<view class="datalist">
				<view class="dgjj">
					<image :src="`${store.state.baseImgUrl}static/indexpage/dgjj.png`" mode=""></image>
				</view>
				<view class="jtzn">
					<image :src="`${store.state.baseImgUrl}static/indexpage/jtzn.png`" mode=""></image>
					<view class="busdoc">
						<view class="box">
							<view class="titlecss">
								公交“重阳宫”站
							</view>
							<text>转乘：在西安市区，可乘坐930路到“鄂邑汽车站”下车，不行1分钟到“人民路”站，换乘鄂邑901路到“重阳宫”站下车</text>
						</view>
					</view>
					<view class="buslist">
						<view class="box">
							<text>陕西省  西安市 鄂邑 祖庵镇重阳宫</text>
							<view class="dhbutton">
								开始导航
								<view class="triangle-right"></view>
							</view>
						</view>
					</view>
				</view>
				<view class="ylxz">
					<image :src="`${store.state.baseImgUrl}static/indexpage/ylxz.png`" mode=""></image>
					
				</view>
				<view class="djly">
					<image :src="`${store.state.baseImgUrl}static/indexpage/djly.png`" mode=""></image>
				</view>
			</view>
			<view class="nomore">
				<view class="position_re">
					<image class="nomore_img" :src="`${store.state.baseImgUrl}static/main/topdy1.png`" mode=""></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
import { useStore } from 'vuex';
	
	const store = useStore()

const toback=()=>{
	uni.navigateBack({
		delta: 1
	})
}
</script>

<style lang="less" scoped>
	.page {
		min-height: 100vh;
		background: #5e0e03;
		.content_top{
			position: relative;
			.back{
				position: absolute;
				top: 100rpx;
				left: 50rpx;
				width: 50rpx;
				height: 50rpx;
				font-size: 30rpx;
				color: #fff;
				z-index: 101;
			}
			.logo{
				height: 500rpx;
				width: 100%;
			}
			}
			
		
		.content2{
			padding: 10rpx 5%;
			height: 60rpx;
			position: relative;
			top:-50rpx;
			// background:url('/static/main/top_docimg.png');
			// background-repeat: no-repeat;
			// background-size: cover;
			// background-position: center;
			.border_top{
				position: absolute;
				height: 50rpx;
				width: 90%;
				margin-top: 15rpx;
			}
			.top_text{
				position: absolute;
				color:#fff;
				font-size: 24rpx;
				margin-left: 60rpx;
				display: flex;
				width: 74%;
				justify-content: space-between;

			}
		}
		.content3{
			position: relative;
			top: -30rpx;
			.datalist{
				position: relative;
				width: 100%;
				z-index: 99;
				image{
					width: 90%;
					margin: 0 5%;
				}
			}
			.dgjj{
				width: 100%;
				image{
					height: 200rpx;
				}
			}
			.jtzn{
				position: relative;
				margin-top: 10rpx;
				width: 100%;
				image{
					height: 450rpx;
				}
				.busdoc{
					position: absolute;
					top: 130rpx;
					color: #fff;
					text-align: center;
					width: 100%;
					.box{
						display: inline-block;
						width: 360rpx;
						.titlecss{
							font-size: 24rpx;
						}
						text{
							font-size: 20rpx;
							line-height: 24rpx;
							
						}
					}
					
				}
				.buslist{
					position: absolute;
					bottom: 30rpx;
					color: #fff;
					text-align: center;
					width: 100%;
					.box{
						display: flex;
						justify-content: space-between;
						width: 80%;
						padding: 0 10%;
						font-size: 22rpx;
						.dhbutton{
							height: 60rpx;
							padding: 0 50rpx 0 30rpx;
							line-height: 60rpx;
							display: inline-block;
							background: #d46c17;
							box-sizing: border-box;
							position: relative;
						}
						text{
							padding:20rpx 0;
						}
					}
					
				}
				
			}
			.ylxz{
				
				margin-top: 10rpx;
				width: 100%;
				image{
					height: 160rpx;
				}
				
			}
			.djly{
				margin-top: 10rpx;
				width: 100%;
				image{
					height: 160rpx;
				}
			}
		}
		.nomore{
			position: relative;
			bottom:0rpx ;
			text-align: center;
			width: 100%;
			z-index: 1;
			height:100rpx;
			.position_re{
				width: 100%;
				position: absolute;
				bottom:30rpx ;
			}
		 
		}
	}
	.triangle-right {
		position: absolute;
		    right: 12rpx;
		    bottom: 18rpx;
		    width: 0;
		    height: 0;
		    border-top: 12rpx solid transparent;
		    border-bottom: 12rpx solid transparent;
		    border-left: 20rpx solid #fff;
		}

	
</style>